<template>
  <div class="app">
    <div class="divLeft">
      <div class="divTitle">
        <img src="@/assets/title.png" style="width: 150px;
    height: 64px" alt="">
      </div>
    <el-form ref="form" class="form" :model="roleForm" :rules="rules" label-width="60px" >
  <el-form-item class="input" prop="name">
    <el-input v-model="roleForm.name"  placeholder="请输入账户" prefix-icon="el-icon-mobile" ></el-input>
  </el-form-item>
  <el-form-item prop="password">
   <el-input class="shuru"

    placeholder="请输入密码"
    prefix-icon="el-icon-lock"
    v-model="roleForm.password"
    show-password>>
  </el-input>
  </el-form-item>
    </el-form>
    <div class="beixuan">
       <el-checkbox v-model="checked">记住密码</el-checkbox>
    </div>
    <div  class="denglu" @click="denglu">
     立即登录
    </div>
    </div>
    <div class="divRight"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {

      form: '',
      checked: false,
      roleForm: {
        name: 'admin',
        password: 'admin'
      },
      rules: {
        name: [{ required: true, message: '账户不能为空哦~', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空哦~', trigger: 'blur' }]
      }
    }
  },
  methods: {
    async denglu () {
      await this.$refs.form.validate()
      this.$router.push('index')
    }
  }

}
</script>

<style lang="less" scoped>
.app{
 width: 958px;
    height: 516px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 20px rgb(93 93 93 / 33%);
    background-color: #fff;
    border-radius: 40px;
}
.divLeft {
    float: left;
    width: 398px;
    height: 516px;
    background-color: aqua;
    background: #fff;
    border-radius: 34px 0 0 34px;
    margin: 0 auto;
    .divTitle{
margin-left: 124px;
    margin-top: 72px;
    }
}
.form{
  margin-top: 30px;
  margin-right: 70px;
.el-icon-mobile .el-input__inner {
 height: 60px;
}
}

.shuru{
  margin-top: 30px;
}
.beixuan{
  margin-left: 62px;
}
.denglu{
  line-height: 50px;
  text-align: center;
  width: 268px;
  height: 50px;
  background-color: aqua;
  margin-left: 62px;
  margin-top: 30px;
}

 .divRight {
    float: right;
    background-image: url(@/assets/login.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 560px;
    height: 516px;
}

</style>
